<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键字热度排行统计</title>
    <link rel="stylesheet" href="/src/css/layui.css">
    <script src="/src/layui.js"></script>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/echarts/echarts.js"></script>
    <link rel="stylesheet" href="/css/statistics/transaction-statistics.css">
</head>
<body>
    <div class="layui-row col-sm-10 col-md-10 col-lg-10">
        <div class="layui-elem-quote">
            <div id="userTable" style="font-size: 18px;float: left">关键字热度排行统计</div>
            <div style="float: right">
                <button class="layui-btn" onclick="location.reload()"><i class="layui-icon layui-icon-refresh"></i>刷新
                </button>
                <button class="layui-btn" onclick="javascript:goBack();"><i class="layui-icon layui-icon-return"></i>返回
                </button>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <h2 style="padding-left: 10px"><span class="layui-icon layui-icon-friends"></span>关键字热度排行统计</h2>
    </div>
    <div class="layui-row">
        <table class="layui-table" id="box">
            <tr id="title"></tr>
            <tr id="sum"></tr>
        </table>
    </div>
    <div class="layui-row">
        <h2 style="padding-left: 10px" class="layui-back"><span class="layui-icon layui-icon-chart-screen"></span>
            关键字热度排行统计
        </h2>
    </div>
    <div class="layui-row col-sm-10 col-md-10 col-lg-10">
        <div id="main" style="width: 100%;height: 500px"></div>
    </div>
    </div>
</body>
<script>
    select();
    function select() {
        $.ajax({
            type:"post",
            dataType:"json",
            url:"/JsKeyWordHeatStatistics/selectKeyWords",
            success:function (data) {
                var type = new Array();
                var count = new Array();
                var list=data.data;
                $("#title").append("<td>关键字名称</td>");
                $("#sum").append("<td>搜索次数</td>");
                for (var i = 0; i < list.length; i++) {
                    $("#title").append("<td>"+list[i].searchKeywords+"</td>");
                    $("#sum").append("<td>"+list[i].countNum+"</td>");
                    type.push(list[i].searchKeywords);
                    count.push(list[i].countNum);
                }
                echart(type,count,"关键字");
            }
        })
    };

    var myChar = echarts.init(document.getElementById('main'));
    function echart(type,count,name) {
        var option = {
            //标题
            title: {
                text: '订单统计图',//主标题
                subtext: '思云产品'//副标题
            },
            //图例位置
            legend: {
                show: true
            },

            //右上角工具栏
            toolbox: {
                feature: {
                    dataView: { //数据视图
                        show: true
                    },
                    magicType: {//动态类型切换
                        type: ['line', 'bar']
                    },
                    restore: { //重置
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    }
                }
            },
            //提示框
            tooltip: {},
            //y轴
            yAxis: {
                type: 'value',
                position: 'left',
            },
            xAxis:{
                data:type
            },
            series: [
                {
                    //名称，提示框tooltip会显示
                    name: name,
                    //决定这的图表是什么类型的
                    type: 'bar',
                    data: count,
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max'},
                            { type: 'min', name: 'Min'}
                        ]
                    }
                }
            ]
        }
        //使用指定的配置项和数据显示图表
        myChar.setOption(option);
    };
</script>
</html>